

<template>
  <div>
    <div>
      <!-- 头部 -->
      <el-card>
        <el-form class="pageQuery" label-position="top">
          <div class="queryItem" v-for="(queryItem, index) in queryItem" :key="index">
            <el-form-item :label="queryItem.label">
              <el-input v-if="queryItem.inputType == 'input'" :placeholder="queryItem.placeholder"
                v-model="queryInfo[queryItem.model]"></el-input>

              <el-select v-if="queryItem.inputType == 'select'" :placeholder="queryItem.placeholder"
                v-model="queryInfo[queryItem.model]">
                <el-option v-for="(item, index) in  option[queryItem.option]" :key="index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="getListData">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="content">
        <el-table :data="listData" v-loading="loading">
          <el-table-column width="150" v-for="(tableItem, index) in tableItem" :key="index" :label="tableItem.label"
            :prop="tableItem.prop">
            <template slot-scope="scope">
              <div v-html="$api.status.status(scope.row.status, option[$api.Enum.DicTypeStatus])"
                v-if="tableItem.prop == 'status'"></div>
              <div v-else>{{ scope.row[tableItem.prop] }}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" v-if="$api.buttonPower(65)" @click="detailButton(scope.row)">查看</el-link>
            </template>
          </el-table-column>

          <template slot="empty">
            <myEmpty></myEmpty>
          </template>
        </el-table>

        <el-drawer title="套餐详情" :visible.sync="detail_box.show" size="50%">
          <comboListDetail :request="detail_box.request" v-if="detail_box.show" @close="detailClose"></comboListDetail>
        </el-drawer>
        <!-- 分页 -->
        <myPaging :queryInfo="queryInfo" :getListData="getListData"></myPaging>
      </el-card>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      queryInfo: {
        total: 0,
        size: 10,
        page: 1
      },
      option: [],
      queryItem: [
        {
          inputType: 'input',
          model: 'name',
          placeholder: '请输入套餐名称',
          label: '套餐名称',
        },
        {
          inputType: 'select',
          model: 'agent_app_id',
          placeholder: '请选择应用商',
          label: '所属应用商',
          option: this.$api.Enum.DicTypeResellerList
        },
        {
          inputType: 'select',
          model: 'group_id',
          placeholder: '请选择套餐组',
          label: '所属套餐组',
          option: this.$api.Enum.DicTypeComboGroupList
        },
        {
          inputType: 'select',
          model: 'status',
          placeholder: '请选择状态',
          label: '状态',
          option: this.$api.Enum.DicTypeStatus
        },
      ],
      tableItem: [
        {
          label: '编号',
          prop: '35'
        },
        {
          label: '所属套餐组',
          prop: 'group_name'
        },
        {
          label: '套餐名称',
          prop: 'name'
        },
        {
          label: '显示名称',
          prop: 'title'
        },
        {
          label: '套餐类型',
          prop: 'combo_type_name'
        },
        {
          label: '流量',
          prop: 'flow'
        },
        {
          label: '语音',
          prop: 'voice'
        },
        {
          label: '短信',
          prop: 'sms'
        },
        {
          label: '有效期/月',
          prop: 'effect_month'
        },
        {
          label: '销售价格',
          prop: 'sale_price'
        },
        {
          label: '状态',
          prop: 'status'
        },
      ],
      loading: false,
      detail_box:{
        show:false,
        request: {
          id: 0,
        },
      }
    };
  },
  methods: {
    getListData() {
      this.loading = true
      this.$api.combo.comboList(this.queryInfo, res => {
        if (res.status) {
          this.listData = res.data.list;
          this.queryInfo.total = res.data.page.total;
          this.loading = false
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize;
      this.getListData();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getListData();
    },
    detailButton(row) {
      this.detail_box.show = true
      this.detail_box.request.id = row.id
    },
    detailClose(e) {
      this.detail_box.show = false
      if (e.is_change){
        this.getListData()
      }
    }
  },
  mounted() {
    this.getListData();
    this.$api.foundation.dicListExtendCache(
      [
        this.$api.Enum.DicTypeOperator,
        this.$api.Enum.DicTypeStatus,
        this.$api.Enum.DicTypeComboGroupList,
        this.$api.Enum.DicTypeResellerList,
      ],
      {},
      res => {
        this.option = res;
      }
    );
    this.$api.power(this.queryItem, this.tableItem, res => {
      this.queryItem = res.queryItem
      this.tableItem = res.tableItem
    })
  }
};
</script>

<style lang="less" scoped>
.content {
  margin-top: 20px;
}

.el-table {
  min-height: 300px;
  max-height: 1100px;
  overflow: auto;
}

.el-pagination {
  margin-top: 20px;
}

.fontColor {
  color: #909399;
}

.addComboForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
}

.submitButton {
  border-top: 1px solid #cccccc;
  margin-top: 20px;
  width: 100%;
  text-align: end;
  padding-top: 20px;

  span {
    font-weight: 700;
    font-size: 16px;
    margin-right: 5px;
  }

  .el-input {
    width: auto;
    margin-right: 15px;
  }
}
</style>

